<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.common.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;min-height:12rem;"></div>
    <script type="text/javascript">
        "use strict"
            // //x 轴数据
            // var xData = ["2000-06-05", "2000-06-06", "2000-06-07", "2000-06-08", "2000-06-09", "2000-06-10", "2000-06-11", "2000-06-12", "2000-06-13", "2000-06-14", "2000-06-15", "2000-06-16", "2000-06-17", "2000-06-18",
            //     "2000-06-19", "2000-06-20", "2000-06-21", "2000-06-22", "2000-06-23", "2000-06-24", "2000-06-25", "2000-06-26", "2000-06-27", "2000-06-28", "2000-06-29", "2000-06-30", "2000-07-01", "2000-07-02", "2000-07-03",
            //     "2000-07-04", "2000-07-05", "2000-07-06", "2000-07-07", "2000-07-08", "2000-07-09", "2000-07-10", "2000-07-11", "2000-07-12",];
            // //y轴第一个数据
            // var data1 = [2, 3, 4, 5, 6, 7, 11, 33, 44, 33, 22, 33, 11, 44, 33, 5, 34, 2, 3, 11, 88, 33, 22, 11, 33, 44, 11, 22, 33, 22, 12]
            // //y轴第二条数据 
            // var data2 = [123, 33, 222, 44, 55, 66, 21, 33, 24, 55, 66, 77, 88, 99, 133, 44, 66, 44, 33, 22, 11, 66, 77, 88, 99, 33, 55, 32, 22, 55, 55, 55, 55, 555, 5,]
            // var initData = { //需要给我传的数据
            //     xData: xData,
            //     yData: [data1,data2],
            //     legend: ['线条一', '线条二'],
            //     color: ['green', 'blue']
            // }
        //var initData =  "{  \"color\" : [    \"green\",    \"green\"  ],  \"yData\" : [    [      0,      0.81999999999999995,      5.6200000000000001,      -8.9499999999999993,      -8.9499999999999993,      -8.9499999999999993    ],    [      0,      0.81999999999999995,      5.6200000000000001,      -8.9499999999999993,      -8.9499999999999993,      -8.9499999999999993    ]  ],  \"legend\" : [    \"1\",    \"2\"  ],  \"xData\" : [    \"2017-11-04\",    \"2017-11-05\",    \"2017-11-06\",    \"2017-11-08\",    \"2017-11-09\",    \"2017-11-11\"  ]}"
           //var initData  ={
           //    "legend": [
           //        {
           //            "legend": "七日年化收益率(%)"
           //        }],
           //    "legendShow":true,
           //    "xData": [{ "time": "2017-09-29" }, { "time": "2017-10-08" }, { "time": "2017-10-09" }, { "time": "2017-10-10" }, { "time": "2017-10-11" }, { "time": "2017-10-12" }, { "time": "2017-10-13" }, { "time": "2017-10-15" }, { "time": "2017-10-16" }, { "time": "2017-10-17" }, { "time": "2017-10-18" }, { "time": "2017-10-19" }, { "time": "2017-10-20" }, { "time": "2017-10-22" }, { "time": "2017-10-23" }, { "time": "2017-10-24" }, { "time": "2017-10-25" }, { "time": "2017-10-26" }, { "time": "2017-10-27" }, { "time": "2017-10-29" }, { "time": "2017-10-30" }, { "time": "2017-10-31" }, { "time": "2017-11-01" }, { "time": "2017-11-02" }, { "time": "2017-11-03" }, { "time": "2017-11-06" }], 
           //    "yData": [[{ "data": "4.479" }, { "data": "0" }, { "data": "4.354" }, { "data": "4.362" }, { "data": "4.376" }, { "data": "4.392" }, { "data": "4.42" }, { "data": "4.476" }, { "data": "4.502" }, { "data": "4.516" }, { "data": "4.527" }, { "data": "4.541" }, { "data": "4.541" }, { "data": "4.542" }, { "data": "4.54" }, { "data": "4.54" }, { "data": "4.542" }, { "data": "4.532" }, { "data": "4.519" }, { "data": "4.492" }, { "data": "4.46" }, { "data": "4.463" }, { "data": "4.464" }, { "data": "4.47" }, { "data": "4.486" }, { "data": "4.557" }],
           //   ]
           //}
        var myChart = echarts.init(document.getElementById('main'));
        var option = {}

        //调用这个方法
        //initChart(initData)

        function initChart(initData) {
            initData = JSON.parse(initData)
            var newDataArr = []
            var unit = ''
            newDataArr.legend = []
            newDataArr.yData = []
            newDataArr.xData = []
            newDataArr.legendShow = initData.legendShow === undefined ? true:initData.legendShow;
            if(initData.legend){
            for (let i = 0; i < initData.legend.length; i++) {
                const item = initData.legend[i];
                unit = item.legend.slice(item.legend.indexOf('(')+1,item.legend.indexOf(')'))
                newDataArr.legend.push(item.legend)
            }
        }
        if(initData.yData){
            for (let a = 0; a < initData.yData.length; a++) {
                const item = initData.yData[a];
                var itemArr = []
                for (let b = 0; b < item.length; b++) {
                    const aa = item[b];
                    itemArr.push(aa.data)
                }
                newDataArr.yData.push(itemArr)
            }
        }
        if(initData.xData){

            for (let c = 0; c < initData.xData.length; c++) {
                const item = initData.xData[c];
                newDataArr.xData.push(item.time)
            }
        }
            if (initData.color) {
                newDataArr.color = initData.color                
            }
            initData = newDataArr
            // 基于准备好的dom，初始化echarts实例
            option = {
                color: ['red', 'blue'], //两条线颜色
                animation: false,
                legend: {
                    show: initData.legendShow,
                    icon: 'image://line.png',
                    type: 'scroll',
                    data: initData.legend,
                    bottom: 10,
                    textStyle: {
                        color: 'rgb(170,170,170)',
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    backgroundColor: 'rgba(245, 245, 245, 0.8)',
                    borderWidth: 1,
                    borderColor: '#ccc',
                    padding: 10,
                    textStyle: {
                        color: 'rgb(170,170,170)'
                    },
                    formatter: function (params) {
                            var result = '';
                        for (let e = 0; e < params.length; e++) {
                            const item = params[e];
                            if (item.seriesName.indexOf('(') > 0) {
                                result += '<span style="display:inline-block;margin-bottom: 4px;margin-right:5px;width:9px;height:3px;background-color:' + item.color + '">' + '</span>' + item.axisValue + '</br>' + item.seriesName.slice(0, item.seriesName.indexOf('(')) + '&nbsp; : &nbsp; ' + item.data + unit + '</br>';
                            } else {
                                result += '<span style="display:inline-block;margin-bottom: 4px;margin-right:5px;width:9px;height:3px;background-color:' + item.color + '">' + '</span>' + item.axisValue + '</br>' + item.seriesName + '&nbsp; : &nbsp; ' + item.data + unit + '</br>';
                            }
                        }
                        return result;
                    },
                    // '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:red"></span>{b}</br> {a0}: {c0}'+unit,
                    lineStyle: {
                        color: 'red',
                        width: 0.5,
                        opacity: 1
                    },
                    position: function (pos, params, el, elRect, size) {
                        var obj = { top: 10 };
                        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 10;
                        return obj;
                    },
                },
                xAxis: [{
                    data: initData.xData,
                    axisPointer: {
                        label: {
                            show: false
                        },
                    },
                    axisTick: {
                        show: false
                    },
                    nameTextStyle: {
                        color: 'rgb(170,170,170)'
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgb(170,170,170)'
                        }
                    },

                }],
                yAxis: [{
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisPointer: {
                        label: {
                            show: false
                        },
                    },
                    nameTextStyle: {
                        color: 'rgb(170,170,170)'
                    },
                    axisLabel: {
                        formatter: function (params) {
                            if (String(params).indexOf('.') >= 0) {
                                return params
                            } else {
                                return String(params) + '.00'
                            }
                        },
                        textStyle: {
                            color: 'rgb(170,170,170)'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgb(170,170,170)'
                        }
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgb(170,170,170)'
                        }
                    },
                }],
                grid: [{
                    tooltip: {
                        axisPointer: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                    },
                    left: '12%',
                    right: '7%',
                    top: '8%'
                }],
                series: []
            };
            if (initData.color && initData.color.length > 0) {
                option.color = initData.color
            }
            for (let e = 0; e < initData.yData.length; e++) {
                const item = initData.yData[e];
                var itemData = {}
                itemData.type = 'line'
                itemData.name = initData.legend[e]
                itemData.data = item
                itemData.smooth = true
                itemData.itemStyle = {
                    normal: {
                        color: initData.color ? initData.color[e] : 'red'
                    }
                },
                    itemData.areaStyle = {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: initData.color ? initData.color[e] : '#fff'
                            }, {
                                offset: 1,
                                color: 'white'
                            }])
                        }
                    },
                    itemData.lineStyle={
                            normal:{
                                width:1
                            }
                        },
                        itemData.symbol= 'none',
                    option.series.push(itemData)
            }
            setChart(option)
        }

        function setChart(data) {
            if (myChart) {
                myChart.clear()
                //   myChart.dispose()
            }

            // 使用刚指定的配置项和数据显示图表。
            setTimeout(function() {
                myChart.setOption(option);
            }, 0);

        }
    </script>
</body>

</html>